<script setup>

import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'

// 查询
const itemsPerPage = ref(10);
const pageNo = ref(1);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '活动名称', key: 'activityName', sortable: false},
    {title: '攻方企业', key: 'attackName', sortable: false},
    {title: '攻方人员', key: 'attackUserName', sortable: false},
    {title: '防守企业', key: 'defendName', sortable: false},
    {title: '审核状态', key: 'applyStatus', sortable: false},
    {title: '创建时间', key: 'createTime', sortable: false},
    {title: '操作', key: 'actions', sortable: false}
];
const companyList = ref([
    {value:'48',title:'党委机关'},
    {value:'50',title:'事业单位'},
    {value:'51',title:'电子政务'},
    {value:'52',title:'政府机关'},
    {value:'53',title:'大型国企'},
    {value:'54',title:'其他单位'}
]);
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);
const userInfo = ref(JSON.parse(localStorage.getItem("ZAYY_USER_INFO")));
const search = ref('');
const name = ref(null);
const activityId = ref(null);
const attackId = ref(null);
const attackList = ref([])
watch(name, () => {
    search.value = name.value
})
watch(activityId, () => {
    search.value = activityId.value
})
watch(attackId, () => {
    search.value = attackId.value
})


function loadItems({page, itemsPerPage}) {
    pageNo.value = page
    loading.value = true;
    axios.post('/applyAttack/select', {
        pageNo: pageNo.value,
        pageSize: itemsPerPage,
        activityId: activityId.value,
        defendId: name.value,
        attackId: attackId.value
    }).then(res => {
        items.value = res.data.records;
        totalItems.value = res.data.total;
        loading.value = false;
    })
}

const activityList = ref([]);
const defendList = ref([]);
onMounted(() => {
    axios.post("/activity/select", {pageNo:1,pageSize:1000}).then(res => {
        activityList.value = res.data.records
    })
    axios.post('/companyAttack/findAttackDefenceInfo', {
        activityId: userInfo.value.activityId,
        id: userInfo.value.attackId
    }).then(res => {
        defendList.value = res.data.privateDefendInfo.concat(res.data.publicDefendInfo)
    })
    axios.post("/companyAttack/select", {pageNo:1,pageSize:10000}).then(res => {
        attackList.value = res.data.records
    })
});

// 增改
const isShowDialog = ref(false)
const dialogEnum = {
    update: '编辑申请',
    create: '发起申请'
}
const dialogType = ref(null)
const isShowDeleteDialog = ref(false)
const editedItem = ref({
    activityId: userInfo.value.activityId,
    attackId: userInfo.value.attackId,
    attackUserId: userInfo.value.userId,
    defendId: ''
});

function resetEditedItem() {
    editedItem.value = {
        activityId: userInfo.value.activityId,
        attackId: userInfo.value.attackId,
        attackUserId: userInfo.value.userId,
        defendId: ''
    }
}

function clickNew() {
    dialogType.value = dialogEnum.create
    isShowDialog.value = true
}

function close() {
    isShowDialog.value = false
    resetEditedItem()
    dialogType.value = null
}

function clickEdit(item) {
    editedItem.value = Object.assign({}, item)
    editedItem.value.status += ""
    editedItem.value.companyType += ""
    isShowDialog.value = true
    dialogType.value = dialogEnum.update
}

function save() {
    if (dialogType.value === dialogEnum.update) {
        axios({
            method: 'POST',
            url: '/applyAttack/update',
            data: editedItem.value
        }).then(() => {
            snackbar.info('编辑成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    } else if (dialogType.value === dialogEnum.create) {
        axios({
            method: 'POST',
            url: '/applyAttack/save',
            data: editedItem.value
        }).then((res) => {
            console.log(res.data)
            snackbar.info('创建成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    }
}

// 删
const beDeleteItem = ref({})

function clickDelete(item) {
    isShowDeleteDialog.value = true
    beDeleteItem.value = item
}

function clickDeleteConfirm() {
    axios.post('/applyAttack/delete', {id: beDeleteItem.value.id}).then(() => {
        snackbar.info("删除成功")
        loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        clickCloseDelete()
    })
}

function clickCloseDelete() {
    isShowDeleteDialog.value = false
    beDeleteItem.value = null
}

const beScoreItem = ref({})
const status = ref("")
const isShowScore = ref(false)
function clickScore(item, type) {
    beScoreItem.value = item
    status.value = type
    isShowScore.value = true
}

function clickCloseScore() {
    isShowScore.value = false
    beScoreItem.value = {}
}

function clickScoreConfirm() {
    axios.post('/applyAttack/check', { id: beScoreItem.value.id, applyStatus: status.value, judgeId: userInfo.value.userId}).then(() => {
        snackbar.info("审核成功")
        loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        clickCloseScore()
    })
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>攻方申请模块</v-toolbar-title>
        <v-autocomplete :items="activityList" item-title="name" item-value="id" v-model="activityId" :clearable="true" hide-details label="查询活动"></v-autocomplete>
        <v-autocomplete
        :items=attackList
        :clearable="true"
        hide-details
        v-model="attackId"
        label="查询攻击企业"
        item-title="companyName"
        item-value="id"
        ></v-autocomplete>
        <v-autocomplete
        :items=defendList
        :clearable="true"
        hide-details
        v-model="name"
        label="查询防守企业"
        item-title="companyName"
        item-value="id"
        ></v-autocomplete>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <template v-slot:activator="{ props }" v-if="userInfo.userType == 3">
                <v-btn icon="mdi-plus" v-on:click="clickNew" v-bind="props"></v-btn>
            </template>
            <v-card>
                <v-card-title>{{ dialogType }}</v-card-title>
                <v-card-text>
                    <v-autocomplete
                    :items=defendList
                    v-model="editedItem.defendId"
                    label="选择防守企业"
                    item-title="companyName"
                    item-value="id"
                    ></v-autocomplete>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
                    <v-btn color="primary" variant="text" @click="save">确定</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowDeleteDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定删除?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowScore" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定{{ status == 1 ? '审核通过' : '审核拒绝' }}?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseScore">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickScoreConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="itemsPerPage" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.companyType="{ item }">
            <span v-for="k in companyList" v-show="k.value == item.companyType">
                {{ k.title }}
            </span>
        </template>
        <template v-slot:item.applyStatus="{ item }">
            <v-chip v-if="item.applyStatus == 0" color="blue">
                待审核
            </v-chip>
            <v-chip v-if="item.applyStatus == 1" color="green">
                已通过
            </v-chip>
            <v-chip v-if="item.applyStatus == 2" color="red">
                不通过
            </v-chip>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn icon="mdi-pencil" v-if="userInfo.userType == 3" variant="text" @click="clickEdit(item)"></v-btn>
            <v-btn icon="mdi-delete" variant="text" @click="clickDelete(item)"></v-btn>
            <v-btn v-if="userInfo.userType == 2 && item.applyStatus == 0" @click="clickScore(item, 1)">通过</v-btn>&nbsp;&nbsp;
            <v-btn v-if="userInfo.userType == 2 && item.applyStatus == 0" variant="tonal" @click="clickScore(item, 2)">拒绝</v-btn>
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
